<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <style>
        ._con_water_fall {
            position: absolute;
            display: none;
        }
        .demo_water_flow_container::-webkit-scrollbar{
            display:none
        }
    </style>
</head>

<body>
    <div id="demo_y" class="" style="width: 100%;height:300px;"></div>
</body>

<!-- 必要 -->
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="./render_somthing.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<script>
    {
        var render_somthing_demo_y;
        render_somthing_demo_y = new render_somthing();
        render_somthing_demo_y.init({
            // div的id
            id: "#demo_y",
            // x/y/flow   分别为x向滚动、y向滚动、瀑布流
            method: "y",
            // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
            container: {
                html: `
<table></table>
    `
            },
            // 渲染内容的配置
            content: {
                default: `
                <tr style="display:flex;margin:10px;    border-bottom: solid #dee2e6 1px;padding: 10px;">
                  <td class="xx_pointer rows_width" > 
                  <div  style="position: relative; width: 100%; margin: 5px;display: flex;flex-direction: row;">
                  <img style="width: 24px;height: 24px;" src="#{img}" />
                  <input   style="display:none;"/>
                  <div style="margin-left: 5px;width:300px;" >#{title}</div></div></td>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown">
                      操作
                      </button>
                      <div class="dropdown-menu">
                        <a   class="dropdown-item" @click="zip(num)">云压缩</a>
                        <a  class="dropdown-item" @click="modify_name('dir',num)">重命名</a>
                        <a   class="dropdown-item" @click="move('dir',num)">移动</a>
                        <a  class="dropdown-item" @click="">复制</button>
                        <a  class="dropdown-item" @click="_delete('dir',num)">删除</a>
                      </div>
                    </div>
                  </td>
    
                </tr>
`,
            },
            // 条件渲染内容
            /*
                ^{ROW_INDEX} - 常量，表示数据数组的下标
                #{title}     - 变量，表示数据数组中对象的key
            */
            condition: [
            ],
        })
        render_somthing_demo_y.render([{
                        img: "http://182.92.98.89:5280/img/files_icon/dir.png",
                        title: "私人文件"
                    }, {
                        img: "http://182.92.98.89:5280/img/files_icon/dir.png",
                        title: "公开文件"
                    }, {
                        img: "http://182.92.98.89:5280/img/files_icon/dir.png",
                        title: "我的秘密"
                    }, {
                        img: "http://182.92.98.89:5280/img/files_icon/dir.png",
                        title: "你的秘密"
                    }, {
                        img: "http://182.92.98.89:5280/img/files_icon/dir.png",
                        title: "小姐姐"
                    }, {
                        img: "http://182.92.98.89:5280/img/files_icon/dir.png",
                        title: "其他"
                    }, ]);
    }

    {
        var render_somthing_demo_water_flow;
        render_somthing_demo_water_flow = new render_somthing();
        render_somthing_demo_water_flow.init({
            // div的id
            id: "#demo_water_flow",
            // x/y/flow   分别为x向滚动、y向滚动、瀑布流
            method: {
                type: "flow",
                gap: 10,
                column: 3,
            },
            // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
            container: {
                html: ``
            },
            // 渲染内容的配置
            content: {
                // 默认渲染内容
                default: `
    <div style="height:#{h}px;background-color:gray;">
    <div style="text-align:right;"><a>#{time}</a></div>
    <div style="text-align:right;"><a>#{size}</a></div>
    <div style="padding:20px;">#{title}</div>
    <img style="width:100%;" src="#{img}">
    </div>
        `,
            },
            // 字段函数-对传入的数据在渲染之前进行预处理
            field_function: [{
                    field: "time",
                    // 换算日期显示
                    type: "format_datetime",
                    // 相距现在时间间隔
                    format: "to-now",
                },
                { 
                    field: "headimgurl",
                    // 字符串替换
                    type: "replace_text",
                    text: "http",
                    replace_text: "https",
                },
                {
                    field: "size",
                    // 格式化数字为文件大小
                    type: "format_filesize",
                    // 保留的小数位数
                    bit: 2,
                },
                {
                    field: "title",
                    // 字符遮罩
                    type: "mask_text",
                    // 从第N个字符开始
                    from: 4,
                    // 到第N个字符结束
                    to: 6,
                    // 使用此字符替换
                    char: "*",
                },
                {
                    field: "size",
                    // 字符没有内容时的替换
                    type: "null_replace",
                    // 替换内容
                    text: "0 B",
                },
                {
                    field: "time",
                    // 字符没有内容时的替换
                    type: "null_replace",
                    // 替换内容
                    text: "没有设置时间",
                },
            ],
        })
    }
</script>

</html>